<template>
   <div class="w-full h-full p-2" >
       <button @click="doExport">导出</button>
      <LexicalComposer :initial-config="config" >
        <LexicalRichTextPlugin>
          <template #contentEditable>
            <LexicalContentEditable style="min-height: 300px;"/>
          </template>
          <template #placeholder>
            <div>
              Enter some text...
            </div>
          </template>
        </LexicalRichTextPlugin>
        <VariableBlock />
        <WorkflowVariableBlock/>
        <VariableValueBlock/>
        <LexicalOnChangePlugin  @change="onChange"/>
        <LexicalHistoryPlugin />
        <LexicalAutoFocusPlugin />
        <ComponentPickerBlock  />
     </LexicalComposer>
   </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {$getRoot,$getSelection,TextNode,EditorState} from 'lexical'
import {
  LexicalAutoFocusPlugin,
  LexicalComposer,
  LexicalContentEditable,
  LexicalHistoryPlugin,
  LexicalOnChangePlugin,
  LexicalRichTextPlugin,
} from 'lexical-vue'
import { CustomTextNode } from './lexical/custom-text/node'
import VariableBlock from './lexical/variable-block/index.vue'
import VariableValueBlock from './lexical/variable-value-block/index.vue'
import {VariableValueBlockNode} from './lexical/variable-value-block/node'
import ComponentPickerBlock from './lexical/component-picker-block/index.vue'
import WorkflowVariableBlock  from './lexical/workflow-variable-block/index.vue';
import { WorkflowVariableBlockNode } from './lexical/workflow-variable-block/node';


const config = {
  editable: true,
  namespace:'test',
  theme: {
    // Theme styling goes here
  },
  nodes:[
      CustomTextNode,
      {
        replace: TextNode,
        with: (node: TextNode) => new CustomTextNode(node.__text),
      },
      VariableValueBlockNode,
      WorkflowVariableBlockNode

  ],
  onError:onError
}
function onError(error:any) {
  throw error
}

function onChange(editorState:EditorState) {
  editorState.read(() => {

    console.log("editorState json:",editorState.toJSON()) 
  })
}


onMounted(()=> {
  
})

</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
